<template>
    <view class="content">
        <u-navbar :is-back="true" back-icon-color="#000" :title="title" :background="background" :border-bottom="false" title-color="#000" title-size="30">
            <view class="u-flex" slot="right" style="padding-right: 20rpx;font-size: 28rpx;"
                @click="$gTo('/pages/index/map')">
                <image src="../../static/icon/add_03.png" class="add-03"></image>
                <view class="head-add">地图</view>
            </view>
        </u-navbar>
        
        <view class="search">
            <u-search bg-color="#fff" :show-action="false" v-model="keyword" shape="round" placeholder="请输入项目名称"></u-search>
        </view>
        
        <!-- 筛选项 -->
        <!-- <view class="nav">
            <view class="nav-item">
                <view>区域</view>
                <image src="../../static/icon/arrow_d_01.png" class="arrow-d-01"></image>
            </view>
            <view class="nav-item">
                <view>价格</view>
                <image src="../../static/icon/arrow_d_01.png" class="arrow-d-01"></image>
            </view>
            <view class="nav-item">
                <view>面积</view>
                <image src="../../static/icon/arrow_d_01.png" class="arrow-d-01"></image>
            </view>
            <view class="nav-item">
                <view>排序</view>
                <image src="../../static/icon/arrow_d_01.png" class="arrow-d-01"></image>
            </view>
            <view class="nav-item">
                <view>更多</view>
                <image src="../../static/icon/arrow_d_01.png" class="arrow-d-01"></image>
            </view>
        </view> -->
        
        <u-dropdown ref="uDropdown">
            <u-dropdown-item title="区域">
                <view class="slot-content drop">
                    <view class="u-text-center u-m-b-20 u-flex">
                        <view class="left-drop">
                            <scroll-view scroll-y="true" class="left-box">
                            	<view class="left" v-for="(item, index) in 10" :key="index"
                            	    :class="{active : index == 0}" @click="changeCate(item, index)">
                            	    双阳区
                            	</view>
                            </scroll-view>
                        </view>
                        <view class="right-drop">
                            <scroll-view scroll-y="true" class="right-box">
                            	<view class="left" v-for="(item, index) in 10" :key="index"
                            	    :class="{activeR : index == 0}" @click="changeCate(item, index)">
                            	    太平镇
                            	</view>
                            </scroll-view>
                        </view>
                    </view>
                    <view class="drop-btn">
                        <u-button type="default" size="medium" @click="closeDropdown">重置</u-button>
                        <u-button type="primary" size="medium" @click="closeDropdown">确定</u-button>
                    </view>
                </view>
            </u-dropdown-item>
            <u-dropdown-item title="价格">
                <view class="slot-content drop">
                    <view class="u-text-center u-m-b-20">
                        <view class="term">
                            <view class="dropprice" :class="{activePrice : ind == 0}" 
                                v-for="(el, ind) in 15" :key="ind">不限</view>
                        </view>
                        <view class="custom">
                            <view class="custom-tit">
                                自定义价格<text style="color: #adadad; font-weight: normal;">（单位：万元）</text>
                            </view>
                            <view class="custom-inp">
                                <input type="number" placeholder="最小价格" class="inp">
                                至
                                <input type="number" placeholder="最大价格" class="inp">
                            </view>
                        </view>
                    </view>
                    <view class="drop-btn">
                        <u-button type="default" size="medium" @click="closeDropdown">重置</u-button>
                        <u-button type="primary" size="medium" @click="closeDropdown">确定</u-button>
                    </view>
                </view>
            </u-dropdown-item>
            <u-dropdown-item title="面积">
                <view class="slot-content drop">
                    <view class="u-text-center u-m-b-20">
                        <view class="term">
                            <view class="dropprice" :class="{activePrice : ind == 0}" 
                                v-for="(el, ind) in 15" :key="ind">1-40m²</view>
                        </view>
                        <view class="custom">
                            <view class="custom-tit">
                                自定义面积<text style="color: #adadad; font-weight: normal;">（单位：m²）</text>
                            </view>
                            <view class="custom-inp">
                                <input type="number" placeholder="最小面积" class="inp">
                                至
                                <input type="number" placeholder="最大面积" class="inp">
                            </view>
                        </view>
                    </view>
                    <view class="drop-btn">
                        <u-button type="default" size="medium" @click="closeDropdown">重置</u-button>
                        <u-button type="primary" size="medium" @click="closeDropdown">确定</u-button>
                    </view>
                </view>
            </u-dropdown-item>
            <u-dropdown-item title="更多">
                <view class="slot-content drop">
                    <view class="u-text-center u-m-b-20">
                        <view class="drop-more" @click="KStimeShow = true">
                            <view>开盘开始时间：</view>
                            <input type="text" v-model="startTime" placeholder="请选择开始时间" disabled>
                        </view>
                        <view class="drop-more" @click="JStimeShow = true">
                            <view>开盘结束时间：</view>
                            <input type="text" v-model="endTime" placeholder="请选择结束时间" disabled>
                        </view>
                        <view class="drop-more">
                            <view>销售状态：</view>
                            <input type="text" placeholder="请选择销售状态" disabled>
                        </view>
                        <view class="drop-more">
                            <view>户型：</view>
                            <input type="text" placeholder="请选择户型" disabled>
                        </view>
                        <view class="drop-more">
                            <view>项目类型：</view>
                            <input type="text" placeholder="请选择项目类型" disabled>
                        </view>
                        <view class="drop-more">
                            <view>装修：</view>
                            <input type="text" placeholder="请选择装修" disabled>
                        </view>
                    </view>
                    <view class="drop-btn">
                        <u-button type="default" size="medium" @click="closeDropdown">重置</u-button>
                        <u-button type="primary" size="medium" @click="closeDropdown">确定</u-button>
                    </view>
                </view>
            </u-dropdown-item>
            
            <u-dropdown-item v-model="value1" title="排序" :options="options1"></u-dropdown-item>
        </u-dropdown>
        
        <view class="wrapper">
            <view class="item" v-for="(item, index) in 10" :key="index" @click="$gTo('/pages/index/floor-details')">
                <image src="../../static/del/del_09.png" class="del-09"></image>
                <view>
                    <view class="u-flex u-row-between u-col-center">
                        <view>
                            <view class="name">阳光硅谷阳光硅谷阳光硅谷阳光硅谷</view>
                            <view class="area">朝阳区 · 8588元/m²</view>
                        </view>
                        <view class="baobei" @click.stop="$gTo('/pages/index/report')">报备</view>
                    </view>
                    <view class="price">
                        <view>
                            <text class="p-l">1.2</text>
                            <text class="p-l-r">万元</text>
                            <text>/套佣金</text>
                        </view>
                        <view class="plan">2个方案</view>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 选择时间 -->
        <u-picker v-model="KStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(1, $event)"></u-picker>
        <u-picker v-model="JStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(2, $event)"></u-picker>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
                title: '全部楼盘',
                options1: [{
                        label: '默认排序',
                        value: 1,
                    },
                    {
                        label: '价格从低到高',
                        value: 2,
                    }
                ],
                value1: 1,
                KStimeShow: false, //开始时间
                JStimeShow: false, //结束时间
                startTime: '', //开始时间
                endTime: '', //结束时间
                timeParams: { //时间格式
                	year: true,
                	month: true,
                	day: true,
                	hour: false,
                	minute: false,
                	second: false
                },
                data: {},
            };
        },
        onLoad(option) {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
            
            if (option.title) {
                this.title = option.title
            }
            this.getScreen()
        },
        methods: {
            closeDropdown() {
                this.$refs.uDropdown.close();
            },
            
            //选择时间
            chooseTime(num, e) {
            	if (num == 1) {
                    this.startTime = e.year + '-' + e.month + '-' + e.day;
            	}
                if (num == 2) {
                    this.endTime = e.year + '-' + e.month + '-' + e.day;
            	}
            },
            
            getScreen() {
                this.$ajax('properties_screen', {
                    // user_token: this.$getSync('userToken'),
                    type: 1,//1筛选加不限
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.data = ret.detail
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
            	if (e.scrollTop == 0) {
            		this.background.backgroundColor = 'rgba(255,255,255,0)';
            	} else {
            		this.background.backgroundColor = 'rgba(255,255,255,' + a + ')';
            	}
            },
        }
    };
</script>

<style lang="scss">
    .drop-more{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2rpx solid #e6e6e6;
        margin: 0 20rpx;
        text-align: left;
    }
    .drop-more>view{
        width: 27vw;
    }
    .drop-more>input{
        flex: 1;
        height: 100rpx;
    }
    
    
    .term{
        padding: 10rpx 20rpx 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .dropprice{
        font-size: 26rpx;
        padding: 10rpx 20rpx;
        border-bottom: 10rpx;
        background-color: #f8f8f8;
        margin: 10rpx;
    }
    .activePrice{
        background-color: #eff1fe;
        color: #00a1e9;
    }
    .custom{
        padding: 20rpx 20rpx 0;
    }
    .custom-tit{
        font-size: 28rpx;
        font-weight: bold;
        text-align: left;
    }
    .custom-inp{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .inp{
        text-align: center;
        height: 100rpx;
        border-bottom: 2rpx solid #e6e6e6;
    }
    
    
    
    .drop-btn{
        padding: 0 100rpx 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .drop{
        background-color: #fff;
    }
    .left-box{
        height: 700rpx;
    	width: 30vw;
        box-sizing: border-box;
        background-color: #f7f8fa;
    }
    .left {
    	width: 100%;
    	height: 94upx;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	font-size: 25upx;
    	box-sizing: border-box;
    }
    .active {
        background-color: #fff;
    	box-sizing: border-box;
        color: #00a1e9;
        font-size: 30rpx;
        font-weight: bold;
        position: relative;
    }
    .active::after{
        display: block;
        content: '';
        width: 6rpx;
        height: 76rpx;
        background-color: #00a1e9;
        position: absolute;
        left: 0;
        top: 10rpx;
    }
    
    .right-box{
        width: 70vw;
        height: 700rpx;
    }
    .activeR{
        color: #00a1e9;
    }
    
    page{
        background-color: #f5f5f5;
    }
    .add-03{
        width: 29rpx;
        height: 33rpx;
        margin-right: 10rpx;
    }
    .head-add{
        color: #00a1e9;
    }
    
    .search{
        // background-color: #f5f5f5;
        padding: 0 25rpx;
    }
    
    .nav{
        // background-color: #f5f5f5;
        padding: 25rpx 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .nav-item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
        font-weight: bold;
    }
    .arrow-d-01{
        width: 13rpx;
        height: 8rpx;
        margin-left: 7rpx;
    }
    
    
    .wrapper{
        padding: 45rpx 20rpx 0;
        background-color: #fff;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 45rpx;
    }
    .del-09{
        width: 213rpx;
        height: 158rpx;
        border-radius: 10rpx;
        margin-right: 15rpx;
    }
    .name{
        font-size: 32rpx;
        font-weight: bold;
        width: 360rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .area{
        padding: 15rpx 0;
        font-size: 24rpx;
        width: 360rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .baobei{
        padding: 15rpx 30rpx;
        font-size: 27rpx;
        color: #803906;
        background-color: #ffecd2;
        border-radius: 15rpx;
    }
    .price{
        font-size: 24rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .p-l{
        color: #fe3c3c;
        font-size: 36rpx;
        font-weight: bold;
    }
    .p-l-r{
        color: #fe3c3c;
        padding: 0 5rpx;
    }
    .plan{
        color: #5f8fbe;
        font-size: 23rpx;
        line-height: 1;
        padding: 4rpx 13rpx;
        border: 2rpx solid #5f8fbe;
        border-radius: 5rpx;
        margin-left: 12rpx;
    }
    
    
</style>
